<!DOCTYPE html>

<html>

<head>
    <title>Gra</title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="style/game.css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

</head>

<body>

    <div id="menu">

        <div id="nowaGra">

            <div id="text">
                <textarea id="txt">Nick</textarea>
            </div>

            <div id="choice">
                <div class="dobro">
                    <input type="radio" name="group1" onclick="ustawGracza(0);" value="wojownik"> Wojownik<br/>
                    <input type="radio" name="group1" onclick="ustawGracza(1);" value="ninja"> Ninja<br/>
                    <input type="radio" name="group1" onclick="ustawGracza(2);" value="lucznik"> Łucznik <br/>
                </div>
                <hr>

                <div class="zlo">
                    <input type="radio" name="group2" onclick="ustawGracza(3);" value="wampir"> Wampir <br/>
                    <input type="radio" name="group2" onclick="ustawGracza(4);" value="wilkolak"> Wilkołak<br/>
                    <input type="radio" name="group2" onclick="ustawGracza(5);" value="nekromanta"> Nekromanta <br/>
                </div>
                <hr>
            </div>
        </div>


        <button type="button" onclick="newGame()">Nowa gra</button>

        <div id="wynikiB">
            <button type="button" onclick="pokazWyniki()">Wyniki</button>
        </div>

    </div>

    <div id="content" oncontextmenu="rightClick(); return false;">
    <canvas id="canvas"></canvas>
    <canvas id="miniCanvas"></canvas>

    <canvas id="attackCanvas"></canvas>

    <div id="enemyHP"></div>

    <div id="info">

        <table>
            <tr>
                <td id="level">Poziom 1</td>
                <td id="nickGracza"></td>
                <td id="zycie"></td>
            </tr>
        </table>

        <table class="dobro">
            <tr>
                <td>Dobro</td>
                <td id="dobroGraczy">Liczba graczy: 0</td>
            </tr>
            <tr>
                <td>Doświadczenie</td>
                <td id="dobroDosw">0</td>
            </tr>
            <tr>
                <td>Złoto</td>
                <td id="dobroZloto">0</td>
            </tr>
            <tr>
                <td>Życie</td>
                <td id="dobroZycie">0</td>
            </tr>
        </table>

        <table class="zlo">
            <tr>
                <td>Zło</td>
                <td id="zloGraczy">Liczba graczy: 0</td>
            </tr>
            <tr>
                <td>Doświadczenie</td>
                <td id="zloDosw">0</td>
            </tr>
            <tr>
                <td>Złoto</td>
                <td id="zloZloto">0</td>
            </tr>
            <tr>
                <td>Życie</td>
                <td id="zloZycie">0</td>
            </tr>
        </table>

        <table class="potwory">
            <tr>
                <td>Życie</td>
                <td id="smokiZycie">Smoki: 0</td>
                <td id="malpoludyZycie">Małpoludy: 0</td>
            </tr>
        </table>


        <div id="handel">

            <table>
                <tr>
                    <td id="kilof-handel"><img src="./images/kilof.png"></td>
                    <td>
                        <button type="button" onclick="kup('kilof', 10);">Kup (10)</button>
                    </td>
                </tr>

                <tr>
                    <td id="wedka-handel"><img src="./images/wedka.png"></td>
                    <td>
                        <button type="button" onclick="kup('wedka', 10);">Kup (10)</button>
                    </td>
                </tr>

                <tr>
                    <td id="siekiera-handel"><img src="./images/siekiera.png"></td>
                    <td>
                        <button type="button" onclick="kup('siekiera', 8);">Kup (8)</button>
                    </td>
                </tr>

                <tr>
                    <td id="wiadro-handel"><img src="./images/wiadro.png"></td>
                    <td>
                        <button type="button" onclick="kup('wiadro', 6);">Kup (6)</button>
                    </td>
                </tr>

                <tr>
                    <td id="przyneta-handel"><img src="./images/przyneta.png"></td>
                    <td>
                        <button type="button" onclick="kup('przyneta', 4);">Kup (4)</button>
                    </td>
                </tr>
            </table>


            <table>
                <tr>
                    <td>
                        <button type="button" onclick="umiejetnosc('sila', 1);">Siła +1 (10)</button>
                    </td>
                    <td>
                        <button type="button" onclick="umiejetnosc('sila');">Siła +2 (15)</button>
                    </td>
                </tr>

                <tr>
                    <td>
                        <button type="button" onclick="umiejetnosc('szybkosc', 1);">Szybkość +1 (10)</button>
                    </td>
                    <td>
                        <button type="button" onclick="umiejetnosc('szybkosc', 2);">Szybkość +2 (15)</button>
                    </td>
                </tr>

                <tr>
                    <td>
                        <button type="button" onclick="umiejetnosc('witalnosc', 1);">Witalność +1 (10)</button>
                    </td>
                    <td>
                        <button type="button" onclick="umiejetnosc('witalnosc', 2);">Witalność +2 (15)</button>
                    </td>
                </tr>


                <tr>
                    <td>
                        <button type="button" onclick="umiejetnosc('zasieg', 1);">Zasięg +1 (10)</button>
                    </td>
                    <td>
                        <button type="button" onclick="umiejetnosc('zasieg', 2);">Zasięg +2 (15)</button>
                    </td>
                </tr>
            </table>

        </div>
    </div>

    <div id="komunikat">

    </div>


    <div id="czat">
        <div id="mess"></div>
        <div id="nick"></div>

        <textarea id="message"></textarea>
        <br/>
        <input id="send" type="submit" value="Wyślij"/>

        <div id="messages"></div>
    </div>

    <div id="wyposazenie">

        <table>
            <tr>
                <td id="kilof"><img src="./images/kilof.png"></td>
                <td id="wedka"><img src="./images/wedka.png"></td>
            </tr>

            <tr>
                <td id="siekiera"><img src="./images/siekiera.png"></td>
                <td id="wiadro"><img src="./images/wiadro.png"></td>
            </tr>

            <tr>
                <td id="przyneta"><img src="./images/przyneta.png"></td>
                <td id="puste"></td>
            </tr>

        </table>

    </div>

    <div id="contextMenu">

        <table>
            <tr>
                <td id="posx"></td>
                <td id="posy"></td>
            </tr>
        </table>

        <table>
            <tr>
                <td id="sila"></td>
            </tr>
            <tr>
                <td id="szybkosc"></td>
            </tr>
            <tr>
                <td id="witalnosc"></td>
            </tr>
            <tr>
                <td id="zasieg"></td>
            </tr>
            <tr>
                <td id="exp"></td>
            </tr>

            <tr>
                <td id="zloto">10</td>
            </tr>
            <tr>
                <td id="mapa"></td>
            </tr>

            <tr>
                <td id="status"></td>
            </tr>
        </table>
    </div>
    </div>

    <div id="wyniki">
    </div>

    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/Resources.js"></script>
    <script type="text/javascript" src="js/Utils.js"></script>
    <script type="text/javascript" src="js/Keys.js"></script>
    <script type="text/javascript" src="js/Player.js"></script>
    <script type="text/javascript" src="js/Game.js"></script>
    <script type="text/javascript" src="js/Enemy.js"></script>
    <script type="text/javascript" src="js/NPC.js"></script>

    <script type="text/javascript" src="js/chat.js"></script>

    <script type="text/javascript">
        $(function () {
            Chat.initialize('http://192.168.1.102/');
        });

        $(function () {
            $(document).mousemove(function (e) {

                mouseMove(e);

            });
        });

        $(function () {
            $(document).click(function (e) {

                mouseClick(e);

            });
        });

        init();
        animate();
    </script>
    </body>
</html>